<template>
    <div class="app-modal">
        <transition name="fade">
            <div v-if="props.show" class="overlay" @click="emit('update:show', false)"></div>
        </transition>
        <transition name="fade">
            <div v-if="props.show" class="main-center cross-center body">
                <slot></slot>
            </div>
        </transition>
    </div>
</template>

<script setup lang="ts" name="AppModal">

/**
 * 模态框组件
 * @property {boolean} [show=false] 是否显示
 * @event {Function} update:show 更新show事件
 * @event {Function} closeLeave 关闭弹窗动画结束事件
 * @example <AppModal v-model:show="true"></AppModal>
 */

export type AppModalProps = {
    /**是否显示 */
    show?: boolean
}
const props = withDefaults(defineProps<AppModalProps>(), {
    show: false
})
const emit = defineEmits(['update:show', 'closeLeave'])
</script>

<style lang='scss' scoped>
.app-modal {
    position: relative;
    z-index: 1000;

    .overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #0005;
    }

    .body {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s ease;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }
}
</style>